<template>
  <div
    class="tech-dashboard"
    @mouseenter="pauseScroll"
    @mouseleave="resumeScroll"
  >
    <!-- <div class="dashboard-header">
      <h2 class="table-title">最新识别</h2>
    </div> -->

    <table class="data-table fixed-header">
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
    </table>

    <div class="scroll-body" ref="scrollWrapper">
      <div ref="scrollContent" class="scroll-inner">
        <table class="data-table">
          <tbody>
            <tr v-for="(row, index) in loopedData" :key="index">
              <td>{{ row.username }}</td>
              <td>{{ row.uploadTime }}</td>
              <td>{{ row.fishName }}</td>
              <td>{{ row.confidence }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="dashboard-footer">统计数量: {{ totalCount }}</div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { fishRecognitionApi } from '@/api/fishRecognition'

const headers = ref(["用户", "上传时间", "识别结果", "识别置信度"])
const tableData = ref([])
const totalCount = ref(750)
const scrollTop = ref(0)
const isPaused = ref(false)
const scrollSpeed = ref(0.5)
const timer = ref(null)
const scrollWrapper = ref(null)
const scrollContent = ref(null)

const loopedData = computed(() => {
  return [...tableData.value, ...tableData.value]
})

const init = async () => {
  //获取最新上传的前5条识别记录（按时间倒序）
  try {
    const res = await fishRecognitionApi.getRecentRecords()
    // 根据API文档，res.data 应为 [{ username, uploadTime, fishName, confidence, thumbnail }, ...]
    tableData.value = res.data || []
    totalCount.value = tableData.value.length
    //加载数据之后再开始滚，不然高度为0
    await nextTick()
    startScroll()
  } catch (error) {
    console.error('获取最新识别记录失败:', error)
  }
}

const startScroll = () => {
  const content = scrollContent.value
  if (!content) return
  
  const originalHeight = content.scrollHeight / 2
  const step = () => {
    if (!isPaused.value) {
      scrollTop.value += scrollSpeed.value

      if (scrollTop.value >= originalHeight) {
        scrollTop.value = 0
        content.style.transition = "none"
        content.style.transform = `translateY(0px)`
        requestAnimationFrame(() => {
          content.style.transition = "transform 0.1s linear"
        })
      } else {
        content.style.transform = `translateY(-${scrollTop.value}px)`
      }
    }

    timer.value = requestAnimationFrame(step)
  }
  content.style.transition = "transform 0.1s linear"
  step()
}

const pauseScroll = () => {
  isPaused.value = true
}

const resumeScroll = () => {
  isPaused.value = false
}

onMounted(() => {
  init()
})

onBeforeUnmount(() => {
  if (timer.value) {
    cancelAnimationFrame(timer.value)
  }
})
</script>

  <style scoped>
.tech-dashboard {
  font-family: "Microsoft YaHei", sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
  background: rgba(0, 0, 0, 0.1);
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.dashboard-header {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.table-title {
  font-weight: bold;
}

.fixed-header {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.fixed-header th {
  padding: 8px 10px;
  font-size: 14px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
}

.scroll-body {
  height: 240px;
  overflow: hidden;
  position: relative;
}

.scroll-inner {
  will-change: transform;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: rgba(255, 255, 255, 0);
}

.data-table td {
  padding: 8px 10px;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.data-table tr:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dashboard-footer {
  text-align: right;
  margin-top: 15px;
  font-style: italic;
  opacity: 0.8;
}
</style>
